<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="app">
    <h1>{{title}}</h1>


    <!--名称切换路由：根据路由对象名称切换路由显示不同组件   根据路由名称切换路由只能使用router-link-->
    <router-link :to="{name:'Users'}">路由名称？号传参</router-link>
    <hr>

    <!-- 显示路由组件标签 -->
    <router-view></router-view>


</div>
</body>
</html>

<template id="users">
    <div>
        <h3>用户列表</h3>
        <a href="#/users/add">新增</a>
        <router-link :to="{name:'userAdd'}">新增</router-link>
        <table>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
                <th>操作</th>
            </tr>
            <tr v-for="(user,index) in users">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <a href="">删除</a>
                    <router-link :to="{name:'userUpdate',query:{id:user.id}}">修改</router-link>
                </td>
            </tr>
        </table>
        <router-view></router-view>
    </div>
</template>

<template id="add">
    <div>
        <h3>用户新增</h3>
        <form>
            姓名：<input type="text" placeholder="请输入与姓名"><br>
            年龄：<input type="text"><br>
            <button>提交</button>
        </form>

    </div>
</template>

<template id="update">
    <div>
        <h3>用户修改</h3>
        <form>
            id: <input type="text" v-model="user.id"><br>
            姓名：<input type="text" placeholder="请输入与姓名" v-model="user.name"><br>
            年龄：<input type="text" v-model="user.age"><br>
            <button>提交</button>
        </form>

    </div>
</template>

<script src="../js/v2.6.10/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>

    const users = {
        template: `#users`,
        data(){
            return {
                users:[]
            }
        },
        created(){
            this.users = [{id:1,name:'张三',age:33}]
        }
    }

    const add = {
        template: `#add`,
    }

    const update = {
        template: `#update`,
        data(){
            return {
                user:{}
            }
        },
        created(){
            let id = this.$route.query.id
            console.log(id)
            this.user = {id:id,name:'hhl',age:33}

        }
    }

    const router = new VueRouter({
        routes: [
            {
                path: '/users', component: users, name: 'Users',
                children:[
                    {path: 'add', component: add, name: 'userAdd'},
                    {path: 'update', component: update, name: 'userUpdate'},
                ]
            },

        ]
    })

    //解决同意路由多次奇幻报错的问题
    const originalPush = VueRouter.prototype.push;
    VueRouter.prototype.push = function push(location){
        return originalPush.call(this ,location).catch(err=>err)
    }


    const app = new Vue({
        el: "#app",
        data: {
            title: '嵌套路由使用'
        },
        methods: {
        },
        router
    });

</script>